<!-- pages/payment/success.vue -->
<template>
  <view class="payment-success">
    <!-- 状态图标动画 -->
    <view class="status-icon">
      <uni-icons 
        type="checkmark-filled" 
        size="64" 
        color="#52c41a"
        class="animated-check"
      />
    </view>

    <!-- 主要内容区域 -->
    <view class="content-wrapper">
      <text class="title">支付成功</text>
      <view class="amount-box">
        <text class="currency">¥</text>
        <text class="amount">998.00</text>
      </view>
      <view class="order-info">
        <text class="info-label">预约编号：</text>
        <text class="info-value">324252536363634</text>
      </view>
    </view>

    <!-- 操作按钮组 -->
    <view class="action-buttons">
      <button 
        class="btn primary"
        hover-class="btn-hover"
        @click="handleBackHome"
      >
        返回首页
      </button>
      <button 
        class="btn secondary"
        hover-class="btn-hover"
        @click="handleViewOrder"
      >
        订单详情
      </button>
    </view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue'

// 页面生命周期
onMounted(() => {
  uni.setNavigationBarTitle({ title: '支付成功' })
})

// 按钮点击处理
const handleBackHome = () => {
  uni.reLaunch({ url: '/pages/index' })
}

const handleViewOrder = () => {
  uni.navigateTo({ url: '/pages/index' })
}
</script>

<style lang="scss" scoped>
.payment-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: #ffffff;
  padding: 60rpx 40rpx;

  // 状态图标动画
  .status-icon {
    margin: 80rpx 0;
    .animated-check {
      animation: check-animation 0.6s ease-in-out;
    }
  }

  // 内容区域样式
  .content-wrapper {
    text-align: center;
    margin-bottom: 80rpx;

    .title {
      font-size: 44rpx;
      color: #333333;
      font-weight: 500;
      margin-bottom: 40rpx;
    }

    .amount-box {
      display: flex;
      justify-content: center;
      align-items: baseline;
      margin-bottom: 32rpx;

      .currency {
        font-size: 36rpx;
        color: #52c41a;
        margin-right: 8rpx;
      }

      .amount {
        font-size: 56rpx;
        color: #52c41a;
        font-weight: 600;
      }
    }

    .order-info {
      font-size: 28rpx;
      color: #666666;
      .info-label {
        color: #999999;
      }
      .info-value {
        color: #333333;
      }
    }
  }

  // 按钮样式
  .action-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32rpx;

    .btn {
      width: 100%;
      height: 96rpx;
      border-radius: 48rpx;
      font-size: 32rpx;
      transition: all 0.2s;

      &.primary {
        background: #1890ff;
        color: #ffffff;
      }

      &.secondary {
        background: #f5f5f5;
        color: #666666;
        border: 1rpx solid #e0e0e0;
      }

      &.btn-hover {
        opacity: 0.9;
        transform: scale(0.98);
      }
    }
  }
}

// 定义动画
@keyframes check-animation {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>